<!--
 * @Author: wangyuan
 * @Date: 2025-04-11 10:22:09
 * @LastEditors: wangyuan
 * @LastEditTime: 2025-04-11 10:41:53
 * @Description: 可复用的tabs组件
-->
<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  // tab项列表
  tabs: {
    type: Array,
    required: true,
    default: () => [],
  },
  // 当前激活的tab索引
  modelValue: {
    type: Number,
    default: 0,
  },
  // 自定义类名
  customClass: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue", "tab-click"]);

// 当前选中的tab索引
const activeIndex = ref(props.modelValue);

// 监听modelValue的变化
watch(
  () => props.modelValue,
  (newVal) => {
    activeIndex.value = newVal;
  }
);

// 切换tab
const handleTabClick = (index) => {
  activeIndex.value = index;
  emit("update:modelValue", index);
  emit("tab-click", index);
};
</script>

<template>
  <div class="tabs-container" :class="customClass">
    <div class="tabs-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: index === activeIndex }"
        @click="handleTabClick(index)"
      >
        {{ tab.title }}
      </div>
    </div>
    <!-- <div class="tabs-content">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-panel"
        :class="{ active: index === activeIndex }"
      >
        <slot :name="`tab-${index}`">
          {{ tab.content }}
        </slot>
      </div>
    </div> -->
  </div>
</template>

<style scoped lang="scss">
.tabs-container {
  width: 100%;

  .tabs-header {
    display: flex;
    border-radius: 4px;
    padding: 4px;

    .tab-item {
      position: relative;
      width: 20%;
      padding: 0 24px;
      background: #0b2c6acc;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      transition: all 0.3s;
      color: #cfeaff;
      font-size: 14px;
      border-radius: 12px;

      text-align: center;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }

      &.active {
        color: #fff;
        background: #1d3a84;
        border-radius: 12px;
      }
    }
  }

  .tabs-content {
    padding: 16px;
    background: rgba(10, 45, 107, 0.5);
    border: 1px solid #1e4a9e;
    border-radius: 4px;
    margin-top: 8px;

    .tab-panel {
      display: none;
      animation: fadeIn 0.3s;

      &.active {
        display: block;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
